﻿@model TopicListModel

@using Telerik.Web.Mvc.UI

@{    
	ViewBag.Title = T("Admin.ContentManagement.Topics").Text;
	var gridPageSize = EngineContext.Current.Resolve<SmartStore.Core.Domain.Common.AdminAreaSettings>().GridPageSize;
}

<div class="section-header">
    <div class="title">
        <i class="far fa-file"></i>
        @T("Admin.ContentManagement.Topics")
    </div>
    <div class="options">
        <a href="@Url.Action("Create")" class="btn btn-primary">
			<i class="fa fa-plus"></i>
			<span>@T("Admin.Common.AddNew")</span>
		</a>
    </div>
</div>

<div class="row mt-3 grid-filter">
	@if (Model.AvailableStores.Count > 1)
	{
		<div class="col-sm-6 col-xl-3 form-group">
			@Html.SmartLabelFor(model => model.SearchStoreId)
			@Html.DropDownList("SearchStoreId", Model.AvailableStores, T("Admin.Common.All"))
		</div>
	}
	<div class="col-sm-6 col-xl-3 form-group">
		@Html.SmartLabelFor(model => model.SystemName)
		@Html.TextBoxFor(model => Model.SystemName, new { @class = "form-control" })
	</div>
	<div class="col-sm-6 col-xl-3 form-group">
		@Html.SmartLabelFor(model => model.Title)
		@Html.TextBoxFor(model => Model.Title, new { @class = "form-control" })
	</div>
	<div class="col-sm-6 col-xl-3 form-group">
		@Html.SmartLabelFor(model => model.WidgetZone)
		@Html.TextBoxFor(model => Model.WidgetZone, new { @class = "form-control" })
	</div>
	<div class="col-sm-6 col-xl-3 form-group">
		@Html.SmartLabelFor(model => model.RenderAsWidget)
		@Html.EditorFor(model => Model.RenderAsWidget, new { @class = "form-control" })
	</div>

	<div class="col-sm-6 col-xl-3 ml-auto form-group">
		@if (Model.AvailableStores.Count > 1)
		{
			@Html.SmartLabel(string.Empty, string.Empty)
		}
		
		<button type="submit" id="btnSearch" value="btnSearch" class="btn btn-warning btn-block">
			<span>@T("Admin.Common.ApplyFilter")</span>
		</button>
	</div>
</div>

<div>
	@(Html.Telerik().Grid<TopicModel>()
			.Name("topics-grid")
			.Columns(columns =>
			{
				columns.Bound(x => x.SystemName)
					.Width(280)
					.Template(x => Html.ActionLink(x.SystemName, "Edit", new { id = x.Id }))
					.ClientTemplate("<a href='Edit/<#= Id #>'><#= SystemName #></a>");
				columns.Bound(x => x.Title);
				columns.Bound(x => x.IsPasswordProtected)
					.Template(item => @Html.SymbolForBool(item.IsPasswordProtected))
					.ClientTemplate(@Html.SymbolForBool("IsPasswordProtected"))
					.Centered();
				columns.Bound(x => x.IncludeInSitemap)
					.Template(item => @Html.SymbolForBool(item.IncludeInSitemap))
					.ClientTemplate(@Html.SymbolForBool("IncludeInSitemap"))
					.Centered();
				columns.Bound(x => x.RenderAsWidget)
					.Template(item => @Html.SymbolForBool(item.RenderAsWidget))
					.ClientTemplate(@Html.SymbolForBool("RenderAsWidget"))
					.Centered();
				columns.Bound(x => x.WidgetZone);
				columns.Bound(x => x.LimitedToStores)
					.Template(item => @Html.SymbolForBool(item.LimitedToStores))
					.ClientTemplate(@Html.SymbolForBool("LimitedToStores"))
					.Hidden(Model.AvailableStores.Count <= 1)
					.Centered();
				columns.Bound(x => x.Priority)
					.Centered();
			})
			.DataBinding(dataBinding => dataBinding.Ajax().Select("List", "Topic"))
			.ClientEvents(events => events.OnDataBinding("onDataBinding"))
			.Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
			.PreserveGridState()
			.EnableCustomBinding(true))
</div>

<script type="text/javascript">
	$(document).ready(function () {
		// Search button.
		$('#btnSearch').click(function () {
			var grid = $('#topics-grid').data('tGrid');
			grid.currentPage = 1; //new search. Set page size to 1
			grid.ajaxRequest();
			return false;
		});
	});

	function onDataBinding(e) {
		var searchModel = {
			SearchStoreId: $('#@Html.FieldIdFor(model => model.SearchStoreId)').val(),
			SystemName: $('#@Html.FieldIdFor(model => model.SystemName)').val(),
			Title: $('#@Html.FieldIdFor(model => model.Title)').val(),
			WidgetZone: $('#@Html.FieldIdFor(model => model.WidgetZone)').val(),
			RenderAsWidget: $('#@Html.FieldIdFor(model => model.RenderAsWidget)').val()
		};
		e.data = searchModel;
	}
</script>
